<template>
  <div class="main">
    <section>
    <search-form :listQuery="listQuery" :queryConfig="queryConfig" :labelWidth="100" :search="search"/>
    <div v-if="rightsButtons['add']" style="margin-bottom: 20px">
      <el-button type="primary" @click="add">新建活动</el-button>
    </div>
    <el-table :data="list" header-row-class-name="table-header" border>
      <el-table-column align="center" label="活动名称" prop="promotionName"></el-table-column>
      <el-table-column align="center" label="优惠类型">
        <template slot-scope="scope">
          {{ getType(scope.row.promotionType) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="活动时间">
        <template slot-scope="scope">
          {{ scope.row.startTime + ' - ' + scope.row.endTime }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="活动状态">
        <template slot-scope="scope">
          {{ getStatus(scope.row.status) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="100" v-if="rightsButtons['edit'] || rightsButtons['disable']">
        <template slot-scope="scope">
          <!--<el-button size="mini" @click="view(scope.row)">查看</el-button>-->
          <el-button size="mini" v-if="rightsButtons['edit'] && scope.row.status!==3 && scope.row.status!==4" @click="edit(scope.row)">编辑</el-button>
          <el-button size="mini" v-if="rightsButtons['disable'] && scope.row.status!==3 && scope.row.status!==4" @click="abandon(scope.row)">使失效</el-button>
        </template>
      </el-table-column>
    </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.pageIndex"
        :page-size="listQuery.pageSize"
        background
        layout="total, prev, pager, next, jumper"
        :total="listTotal">
      </el-pagination>
    </section>
  </div>
</template>

<script>
  import { getFullReduceList, setStatus } from '@/api/activity/fullReduce'
  import searchForm from '@/components/searchForm/index'
  export default {
    name: "fullReduce",
    components: {
      searchForm
    },
    data() {
      let typeData = [
        {
          label: '满减',
          value: 1
        },
        {
          label: '满赠',
          value: 2
        }]
      let statusData = [
        {
          label: '所有',
          value: 0
        },
        {
          label: '未开始',
          value: 1
        },
        {
          label: '进行中',
          value: 2
        },
        {
          label: '已结束',
          value: 3
        },
        {
          label: '已失效',
          value: 4
        }]
      return {
        list: [],
        listTotal: 0,
        listQuery: {
          pageIndex: 1,
          pageSize: 10,
          startTime: '',
          endTime: '',
          status: 0,
          promotionName: ''
        },
        statusList: statusData,
        types: [
          { name: '满减', val: 1},
          { name: '满赠', val: 2}
        ],
        queryConfig: [
          {
            prop: 'promotionName',
            type: 'input',
            label: '活动名称'
          },
          {
            prop: 'promotionTime',
            type: 'daterange',
            label: '活动时间'
          },
          {
            prop: 'status',
            type: 'select',
            label: '活动状态',
            data: statusData
          }
        ],

      }
    },
    activated () {
      this.initList()
    },
    created () {
      // let query = sessionStorage.getItem('_fullCut_search_')
      // if(query) {
      //   this.listQuery = JSON.parse(query)
      // }
      if (this.$store.getters.cachedViews.length === 0) this.initList()
    },
    methods: {
      add() {
        this.$router.push({ path: '/activity/fullReduce/add' })
      },
      initList() {
        console.log(this.listQuery)
        let data = {}
        data.pageIndex = this.listQuery.pageIndex
        data.pageSize = this.listQuery.pageSize
        data.startTime = Array.isArray(this.listQuery.promotionTime) && this.listQuery.promotionTime.length == 2 ? this.listQuery.promotionTime[0] + ' 00:00:00' : ''
        data.endTime = Array.isArray(this.listQuery.promotionTime) && this.listQuery.promotionTime.length == 2 ? this.listQuery.promotionTime[1] + ' 00:00:00' : ''
        data.status = this.listQuery.status
        data.promotionName = this.listQuery.name
        getFullReduceList(data).then(res => {
          this.list = res.data
          this.listTotal = res.totalCount
        })
      },
      getStatus(val) {
        let res =''
        this.statusList.forEach(item => {
          if (item.value === val) { res = item.label }
        })
        return res
      },
      getType(val) {
        let res =''
        this.types.forEach(item => {
          if (item.val === val) { res = item.name }
        })
        return res
      },
      // 缓存数据
      setStorage(item, name) {
        sessionStorage.setItem(name, JSON.stringify(item))
      },
      view(item) {
        this.setStorage(item, '_full_reduce_item_')
        this.$router.push('/activity/fullReduce/view')
      },
      edit(item) {
        this.setStorage(item, '_full_reduce_edit_')
        this.$router.push('/activity/fullReduce/edit')
      },
      // 切换分页
      handleCurrentChange(page) {
        this.listQuery.pageIndex = page;
        this.initList()
      },
      search() {
        this.listQuery.pageIndex = 1
        // sessionStorage.setItem('_fullCut_search_', JSON.stringify(this.listQuery))
        this.initList()
      },
      stopActivity(item) {
        console.log('stop')
      },
      startActivity(item) {
        console.log('start')
      },
      abandon(item) {
        setStatus({id: item.id}).then(res => {
          this.initList();
          this.$message.success('操作成功')
        })
      }
    }
  }
</script>

<style scoped>

</style>
